<template>
	<view class="invite">
		<view class="invite_content">
			<view class="notice" :style="{ marginTop: marginTp + 'px' }">
				<!-- <image class="noticeImg" src="../../../static/tutor/invite/icon_notcie@2x.png"></image>
				 <view class="text">
					 <text>临近订单：高新区金融城，2024-11-02 15:30~15:30</text>
				 </view> -->
			</view>
			<view class="inviteList" :style="scrollHeight">
				<z-paging :empty-view-img-style="{'display':'none'}" empty-view-text="呜~您还没有任何邀约..." class="paging" ref="paging"
					:use-page-scroll="true" @query="queryList" v-model="dataList">
					<InviteOrderItem :ossUrl="ossUrl" :list="dataList" @tapReceive="tapReceive" @tapReject="tapReject">
					</InviteOrderItem>
				</z-paging>
			</view>
		</view>
		<view class="calendar">
			<image @tap="tapSchedule" class="calendarImg" src="/static/tutor/invite/icon_richenbiao@2x.png"></image>
		</view>
		<tui-modal custom padding="0" :show="modal" width="60%" color="#333">
			<slot>
				<view class="orderHint">
					<view class="top">
						<image class="topImg" src="/static/tutor/invite/icon_gouxuan@2x.png"></image>
					</view>
					<view class="content"><text>确定接受邀约</text></view>
					<view class="buttons">
						<tui-form-button width="172rpx" size="28" @click="hideModel(false)" height="56rpx" plain
							background="#63d6d3" color="#63d6d3" radius="100rpx">取消</tui-form-button>
						<tui-form-button width="172rpx" size="28" @click="hideModel(true)" height="56rpx" background="#63d6d3"
							radius="100rpx">接单</tui-form-button>
					</view>
				</view>
			</slot>
		</tui-modal>
		<tui-drawer mode="bottom" :backgroundColor="'rgba(0, 0, 0, 0)'" z-index="10000" :visible="visible"
			@close="closeDrawer">
			<view class="invite-container">
				<view class="top">
					<view class="text_lt" @tap="visible=false"><text>取消</text></view>
					<view class="text_ct"><text>请选择</text></view>
					<view class="text_rt" @tap="selcetReject"><text>确定</text></view>
				</view>
				<view class="content">
					<view :class="activeIndex===i ? 'option hover':'option'" @touchstart="changeColor(i)"
						v-for="(option,i) in options" :key="i"><text>{{option}}</text></view>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import InviteOrderItem from './compontents/inviteOrderItem.vue'
	import {
		getTutorList
	} from "@/http/api/tutor/tutor.js"
	import {
		tutorOrderList,
		tutorOrderDispose
	} from "@/http/api/order/order.js"
	export default {
		data() {
			return {
				marginTp: 0,
				dataList: [],
				modal: false,
				activeIndex: null,
				visible: false,
				clickItem: {},
				options: ['临时有事', '与其他预约时间重叠', '今日休息', '参加培训', '与其他预约时间临近']
			}
		},
		props: {
			assistantId: {
				type: String,
				default: ''
			},
			//oss
			ossUrl: {
				type: String,
				default: ''
			}
		},
		components: {
			InviteOrderItem
		},
		computed: {
			scrollHeight() {
				return `height:calc(100vh - 340rpx)`;
			}
		},
		created() {
			// 获取状态栏高度
			var statusBar = uni.getSystemInfoSync().statusBarHeight
			let navbarHeight = 0
			// 微信小程序状态下导航栏高度
			// #ifdef APP-PLUS
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 导航栏高度 =胶囊高度 +（胶囊顶部距离-状态栏高度）*2
			navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync().statusBarHeight) * 2;
			// #endif
			this.marginTp = statusBar + navbarHeight + 21
			console.log(this.marginTp, statusBar, '高度')
		},
		methods: {
			//日常表
			tapSchedule() {
				uni.navigateTo({
					url: '/pages/invite/modules/schedule/schedule'
				})
			},
			//确认接单
			tapReceive(item) {
				this.modal = true
				this.clickItem = item
			},
			//拒绝接单
			tapReject(item) {
				this.visible = true
				this.activeIndex = null
				this.clickItem = item
			},
			//触摸颜色
			changeColor(index) {
				this.activeIndex = index;
			},
			closeDrawer() {
				this.visible = false
			},
			//接受邀约
			receiveClick() {
				this.activeIndex = null;
				this.visible = true
			},
			//拒绝确认
			selcetReject() {
				tutorOrderDispose({
					userType: 2,
					orderId: this.clickItem.id,
					status: 8,
					refuseReason: this.options[this.activeIndex]
				}).then(res => {
					if (res.code === 200) {
						this.$utils.toast('拒绝成功')
						this.$refs.paging.reload()
						this.visible = false
					}
				})
			},
			//确认接单
			hideModel(isHide) {
				if (isHide) {
					tutorOrderDispose({
						userType: 2,
						orderId: this.clickItem.id,
						status: 2
					}).then(res => {
						if (res.code === 200) {
							this.$utils.toast('接受成功')
							this.$refs.paging.reload()
							this.modal = false
						}
					})
				} else {
					this.modal = false
				}
			},
			showModel() {
				this.modal = true
			},
			queryList(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中...'
				});
				this.getTutorOrderLists(pageNo, pageSize);
			},
			getTutorOrderLists(pageNo, pageSize) {
				tutorOrderList({
					pageNum: pageNo,
					pageSize,
					status: 1
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$refs.paging.complete(res.rows);
					} else {
						this.$utils.toast(res.msg);
					}
				}).finally(() => {
					uni.hideLoading();
				})

			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './invite.scss';
</style>